<template>
  <div v-loading="loading" element-loading-text="拼命加載中,請稍後。。。">
    <hd page="1">
      <p>储值</p>
    </hd>
    <div class="Recharge">
      <div class="moneY">
        <div class="label">储值金额</div>
        <div><span v-show = 'showaa'>NT$</span><input type="number" placeholder="请输入金额,最少为NT$1" v-model="sum" autofocus></div>
      </div>
      <ul>
        <li v-for="(v,i) in money" :key="v.id" @click = active(i) :class="{active: act==i}">NT$ {{v}} </li>
      </ul>
      <div class="Payment">
        <div>
            <button type="button" :class="{active: sum!=='' && parseInt(sum) >= 1}" @click = "submita">立即支付</button>
        </div>
      </div>
       <div class="footer">
           <p>电子发票将发送到你绑定的邮箱内</p>
           <p>点击<a href="javascript:void(0)" @click="goToEmail">更改电子邮箱</a></p>
       </div>
       <div v-show="false">
        <form ref="form" method="post" id="form" name="myform1" :action="message.payUrl">  
          <div>MerchantID:<input type="text" name="MerchantID" v-model="message.MerchantID" id="MerchantID" /></div>  
          <div>TradeInfo:<input type="text" name="TradeInfo" v-model="message.TradeInfo" id="tradeInfo" /></div>  
          <div>TradeSha:<input type="text" name="TradeSha" v-model="message.TradeSha" id="tradeSha" /></div>  
          <div>Version:<input type="text" name="Version" v-model="message.Version" id="Version" /></div>  
          <div>
            <input @click="submit" type="button" id="gg" value="Submit提交" />
          </div>  
        </form>  
      </div>
    </div>
  </div>
</template>
<script>
  import headers from '@/components/header.vue'
  export default {
    components: {
      headers
    },
    data () {
      return {
        sum: null,
        showaa: false,
        message: {},
        money: ['30', '50', '100', '200'],
        act: null,
        userId: null,
        platform: null,
        loading: false
      }
    },
    mounted () {
      this.sum = ''
      // this.userId = _native_.getUserId()
      // this.platform = _native_.getPlatform()
    },
    methods: {
      active (i) {
        this.sum = this.money[i]
        this.act = i
      },
      submita () {
        if (this.sum !== '' && parseInt(this.sum) >= 1) {
          this.loading = true
          this.$api.post('/v1/charge/cash', {user_id: 52, amount: this.sum, platform: 'ios'}).then((result) => {
          // this.$api.post('http://gobike.test.cmmkj.top/v1/charge/cash', {user_id: this.userId, amount: this.sum, platform: this.platform}).then((result) => {
            this.message = result.data
          }).then(() => {
            this.submit()
          })
        }
      },
      submit () {
        this.$refs.form.submit()
      },
      goToEmail () {
        // _native_.editEmail()
      }
    },
    watch: {
      show (istrue) {
        if (!istrue) {
          this.component = null
        }
      },
      sum (value) {
        if (value === '') {
          this.showaa = false
          this.act = null
        } else {
          this.showaa = true
        }
      }
    }
  }
</script>
<style lang="css" scoped>
  .Recharge {
    padding: 0 0.39rem;
    font-family:'HelveticaNeueLTPro-Lt';
  }

  .moneY {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.6rem;
    font-size:0.32rem;
  }

  .moneY div:first-child {
    width: 1.42rem;
    height: 0.34rem;
    padding-top:0.07rem;
  }

  .moneY div:last-child {
    flex: 1;
    color:#a4a8b7;
  }

  .moneY div:last-child>input {
    width: 80%;
    display: inline;
    border: none;
    color:#a4a8b7;
  }
  .moneY div:last-child>input:focus{
    outline:none;
  }
  .Recharge>ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0.5rem 0 0 0;
    padding: 0;
  }

  .Recharge>ul li {
    flex: 45%;
    text-align: center;
    height: 0.88rem;
    background: #eeeeee;
    line-height: 0.88rem;
    font-weight:100;
    border-radius:0.1rem
  }

  .Recharge>ul li.active{
    background:#01d7c8;
    color:white;
  }

  .Recharge>ul li:nth-child(2n) {
    margin-left: 0.1rem;
  }

  .Recharge>ul li:nth-child(n+3) {
    margin-top: 0.1rem;
  }

  .Recharge .Payment h3,
  .Recharge .Payment p {
    margin: 0;
  }

  .Recharge .Payment {
    margin: 0.6rem 0 0.69rem 0;
  }

  .Recharge .Payment h3 {
    font-weight: 100;
    line-height: 0.9rem;
    font-size:0.30rem;
    color: #999;
  }

  .Recharge .Payment>ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .Recharge .Payment>ul>li {
    height: 1.43rem;
    line-height: 1.43rem;
    border-bottom: 0.01rem #e9e9eb solid;
  }


  .Recharge .Payment>ul>li:first-child {
    border-top: 0.01rem #e9e9eb solid;
  }

  .Recharge .Payment>ul>li {
    display: flex;
    justify-content:space-between;
  }

  .Recharge .Payment>ul>li>p:last-child>span {
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
    border: 0.02rem #c5cbd9 solid;
    border-radius: 50%;
  }

  .Recharge .Payment .el-icon-circle-check {
    /* background:#01d7c8; */
    color: #01d7c8;
    border:none !important;
  }

  .Recharge .Payment>div:last-child {
    /* background:#01d7c8; */
    margin-top: 1.22rem;
  }

  .Recharge .Payment>div:last-child button {
    width:100%;
    border: none;
    background: #999;
    /* width: 6.32rem; */
    height: 0.88rem;
    text-align: center;
    color: white;
    border-radius:0.88rem;
    /* disabled: true; */
  }
  .Recharge .footer>p{
    width:100%;
    text-align:center;
    color:#999;
    font-size:0.25rem;
    margin:0;
    line-height:0.45rem;
  }
  .Recharge .footer>p>a{
    color:#01d7c8;font-size:0.25rem;
    text-decoration:none;
  }

  .Recharge .Payment>div:last-child button:focus{
    outline: none;
  }
  .Recharge .Payment>div:last-child button.active{
    background: #01d7c8;
  }
</style>
